<template>
  <div id="app">
    <div style="text-align: center">
      <el-button type="primary" @click="popSubmit()">添加一个</el-button>
    </div>
    <h2>用户信息</h2>
    <el-table
        :data="userSource"
        border
        style="width: 100%">
      <el-table-column
          fixed
          prop="id"
          label="id"
      >
      </el-table-column>
      <el-table-column
          prop="username"
          label="姓名"
      >
      </el-table-column>
      <el-table-column
          prop="address"
          label="地区"
      >
      </el-table-column>
      <el-table-column
          prop="age"
          label="年龄"
      >
      </el-table-column>
      <el-table-column
          fixed="right"
          label="操作"
      >
        <template slot-scope="scope">
          <el-button @click="popModify(scope.row)" type="text" size="small">修改</el-button>
          <el-button type="text" size="small" @click="remove(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!--  分页组件-->
    <div style="text-align: center">
      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="indexPage"
          :page-sizes="[2,5,7,10]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
      </el-pagination>
    </div>
    <!--弹出的添加框框-->
    <el-dialog title="添加用户" :visible.sync="addFlag" :before-close="dialogClose">
      <el-form :model="userMsg" ref="addFrom">

        <el-form-item label="姓名">
          <el-input v-model="userMsg.username"></el-input>
        </el-form-item>

        <el-form-item label="地区">
          <el-input v-model="userMsg.address"></el-input>
        </el-form-item>

        <el-form-item label="年龄">
          <el-input v-model="userMsg.age"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="addFlag = false">取 消</el-button>
        <el-button type="primary" @click="submitAdd()">确 定</el-button>
      </div>
    </el-dialog>

    <!--修改的弹出框框-->
    <el-dialog title="修改用户" :visible.sync="modifyFlag" :before-close="dialogClose">
      <el-form :model="userMsg" ref="modifyFrom">

        <el-form-item label="姓名">
          <el-input v-model="userMsg.username"></el-input>
        </el-form-item>

        <el-form-item label="地区">
          <el-input v-model="userMsg.address"></el-input>
        </el-form-item>

        <el-form-item label="年龄">
          <el-input v-model="userMsg.age"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="modifyFlag = false">取 消</el-button>
        <el-button type="primary" @click="submitModify()">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "Index",
  data() {
    return {
      // 用户的数据，需要请求才能获取
      userSource: [],
      // 页面默认大小
      pageSize: 5,
      // 总条数
      total: 0,
      // 当前页数
      indexPage: 1,
      // 添加框框的标记
      addFlag: false,
      // 修改的标记
      modifyFlag: false,
      // 用户的信息
      userMsg: {}
    }
  },
  created() {
    this.initPage()
  },
  methods: {
    initPage() {
      // 因为我们是挂在到创建的全局vue对象上的所以我们这里使用 this 来获取,然后我们post中的url需要写对应的接口真实访问地址
      this.$http.get("http://localhost:8080/user/all?pageSize=" + this.pageSize + "&pageIndex=" + this.indexPage).then(resp => {
        // 当返回的未200也就是正常登录的时候正常放入数据
        if (resp.data.code === 200) {
          // 设置源数据
          this.userSource = resp.data.data.records
          // 设置总条目
          this.total = resp.data.data.total
          // 否则弹出错误信息并且跳转
        }else {
          this.$notify.error({
            title: '错误',
            message: '请检查登录状态'
          });
          this.$router.push("/")
        }
      })
    },
    handleSizeChange(val) {
      // 设置页面大小
      this.pageSize = val
      // 刷新页面
      this.initPage()
    },
    handleCurrentChange(val) {
      // 设置当前页码
      this.indexPage = val
      // 刷新页码
      this.initPage()
    },
    // 弹出添加框的方法
    popSubmit() {
      this.addFlag = true
    },
    // 关闭清除
    dialogClose() {
      this.userMsg = {}
      this.addFlag = false
      this.modifyFlag = false
    },
    // 提交添加框的方法
    submitAdd() {
      this.$http.post("http://localhost:8080/user/add", this.userMsg).then(resp => {
        if (resp.data.code === 200) {
          this.$notify({
            title: '成功',
            message: '添加成功',
            type: 'success'
          });
        } else {
          this.$notify.error({
            title: '错误',
            message: '添加失败'
          });
        }
      })
      this.addFlag = false
    },
    // 弹出添加框的方法
    popModify(tempMsg) {
      this.userMsg = tempMsg
      this.modifyFlag = true
    },
    // 提交添加框的方法
    submitModify() {
      this.$http.put("http://localhost:8080/user/modify", this.userMsg).then(resp => {
        if (resp.data.code === 200) {
          this.$notify({
            title: '成功',
            message: '修改成功',
            type: 'success'
          });
        } else {
          this.$notify.error({
            title: '错误',
            message: '修改失败'
          });
        }
      })
      this.modifyFlag = false
    },
    remove(row) {
      this.$http.delete("http://localhost:8080/user/remove?id=" + row.id).then(resp => {
        if (resp.data.code === 200) {
          this.$notify({
            title: '成功',
            message: '用户:' + row.username + '删除成功',
            type: 'success'
          });
          this.initPage()
        } else {
          this.$notify.error({
            title: '错误',
            message: '删除失败'
          });
        }
      })
    }

  }
}
</script>
<style scoped>

</style>